<template>
	<div class="home-wrapper">
		<div class="bg"></div>
		<!-- <div class="title"></div> -->
		
		<div class="top-part">
			<image class="avatar" :src="avatarUrl"></image>
			<div class="text-area">
				<text class="title">{{ title }}</text>
			</div>
		</div>


		<div class="btn-box">
			<child :msg="title" @childEvent="sayHello"> </child>
			<div class="btn-today" @click="jumpTo">今日计划</div>
			<div class="btn-other">其他计划</div>
		</div>
	</div>
</template>

<script>
	//引入子组件,在组件中注册
	import Child from "@/components/child.vue"
	export default {
		data() {
			return {
				title: "Cheems，昨天是段历史，明天是个谜团，今天来整点薯条吧！",
				avatarUrl: "../../static/favicon.ico",
			};
		},
		components: {
			Child
		},
		//首页隐藏tabBar
		onShow() {
			uni.hideTabBar();
			// const _this = this;
			// wx.getUserInfo({
			// 	success: function(res) {
			// 		console.log("yuka", res.userInfo);
			// 		_this.avatarUrl = res.userInfo.avatarUrl;
			// 	},
			// });
		},
		onHide() {
			uni.showTabBar();
		},

		methods: {
			sayHello(msg){
				this.title=msg
			},
			jumpTo() {
				uni.switchTab({
					url: "/pages/today/today",
				});
			},
		},
	};
</script>

<style lang="scss">
	.home-wrapper {
		position: relative;
		height: 100vh;

		.bg {
			width: 100%;
			height: 100%;
			// background: url("http://n.sinaimg.cn/sinacn10113/247/w690h1157/20190914/ae26-iepyyhi4701592.jpg") no-repeat center / auto 100%;
			background: url("https://s2.loli.net/2023/03/29/DejRtcXoMhYdKTZ.jpg") no-repeat center / auto 100%;
			filter: blur(8rpx);
		}

		.top-part {
			position: absolute;
			left: 0;
			right: 0;
			top: 26%;
			transform: translateY(-50%);
		}

		.avatar {
			display: block;
			overflow: hidden;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			margin: auto;
			border: 2rpx solid rgb(238, 164, 103);
		}

		.text-area {
			font-size: 30rpx;
			color: #df9aa3;
			padding: 10rpx 8rpx;
			margin: 40px 60rpx;
			font-weight: bold;
			text-align: center;
			line-height: 48rpx;
			background: #ffffff52;
			border-radius: 10rpx;
		}

		.btn-box {
			position: absolute;
			bottom: 370rpx;
			left: 0;
			right: 0;
			margin: auto;

			.btn-today,
			.btn-other {
				width: 300rpx;
				height: 100rpx;
				background: #8ab0c6a4;
				border-radius: 10rpx;
				margin: 20px auto;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>